<template>
	<view class="">
		<!-- 搜索栏 -->
		<view class="searchBar-box u-flex u-row-center">
			<view class="searchBar u-flex u-row-between  u-padding-left-30 u-padding-right-30">
				<view class="u-flex u-row-between" @click="chose_address">
					<text class="u-margin-right-10 ">{{ vuex_address_search.region_name }}</text>
					<u-icon name="arrow-down" color="#909399" size="24"></u-icon>
				</view>
				<input type="text" v-model="key" placeholder="请输入民宿名称" placeholder-class="searchBar-input-placeholder" class="u-flex u-flex-1 searchBar-input" />

				<!-- <u-icon name="search" color="#909399" size="34" @click="search"></u-icon> -->
				<view class="top-search-box-right u-flex u-col-center u-row-between" @click="search">
					<u-icon name="search" color="#fa3534" size="32" class="top-search-box-icon"></u-icon>
					<!-- <uni-icons class="top-search-box-right-icon" type="search" color="#fa3534" size="18"></uni-icons> -->
					<text class="top-search-box-right-text">搜民宿</text>
				</view>
			</view>
		</view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="search-item-first"></view>
			<view
				v-for="(item, index) in search_result"
				:key="index"
				@click="goto_details(item)"
				class="u-flex-col u-margin-right-30 u-margin-left-30 u-margin-bottom-25 u-padding-top-0 u-padding-bottom-30 search-item"
			>
				<u-image :src="item.img" height="350" :lazy-load="true" :fade="true" duration="300" mode="aspectFill"><u-loading slot="loading"></u-loading></u-image>
				<!-- <image :src="item.img" mode=""></image> -->
				<view class="u-padding-top-15 u-padding-left-25 u-padding-right-25">
					<view class=""><u-tag v-for="(ite, ind) in item.keywords_arr" :key="ind" :text="ite" class="u-margin-right-10" mode="light" type="info" size="mini" /></view>
				</view>

				<text class="u-padding-left-25 u-padding-right-25 u-padding-bottom-20 u-padding-top-20 u-font-33 u-main-color">{{ item.house_name }}</text>

				<text class="u-padding-left-25 u-padding-right-25 u-font-26">{{ item.description }}</text>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			// 搜索关键字
			key: '',
			// 搜索回执
			search_result: [],
			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			downOption: {
				auto: false
			},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				auto: false,
				page: {
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '暂无相关数据'
				}
			}
		};
	},
	onLoad(options) {
		console.log(options);
		this.vip_type = options.type;

		let can_init = true; //

		if (options.not_init) {
			can_init = false;
		}

		if (can_init) {
			this.$u.vuex('vuex_address_search', {
				case: '',
				id: '',
				region_name: '全国'
			});
		} else {
			let item = JSON.parse(JSON.stringify(this.vuex_address_dafauflt));
			this.$u.vuex('vuex_address_search', item);
		}
	},
	methods: {
		goto_details(item) {
			this.$u.route({
				url: 'pages/roomDetails/index',
				params: {
					id: item.id
				}
			});
		},

		// 选择地址
		chose_address() {
			console.log('// 点击 地址按钮 TODO : 选择地址');
			this.$u.route({
				url: 'pages/regionalIndex/index',
				params: {
					from: 2
				}
			});
		},

		// 搜索
		search() {
			if (this.key.length !== 0) this.downCallback();
		},

		/*下拉刷新的回调, 有3种处理方式:*/
		downCallback() {
			// 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
			setTimeout(() => {
				this.search_result = [];
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			}, 999);
			// 第3种: 下拉刷新什么也不处理, 可直接调用或者延时一会调用 mescroll.endSuccess() 结束即可
			// this.mescroll.endSuccess()
		},
		/*上拉加载的回调*/
		upCallback(page) {
			// 此处可以继续请求其他接口
			// if(page.num == 1){
			// 	// 请求其他接口...
			// }

			let pageNum = page.num; // 页码, 默认从1开始
			let pageSize = page.size; // 页长, 默认每页10条

			// 接口返回的当前页数据列表 (数组)
			// let curPageData = data.xxx;
			// let curPageLen = curPageData.length;
			let params = {
				vip_type: this.vip_type * 1,
				page: pageNum,
				key: this.key,
				region_id: this.vuex_address_search.id
			};
			if (params.region_id.length == 0) delete params.region_id;
			this.$u.api.search(params).then(res => {
				this.search_result = this.search_result.concat(res.list);
				this.mescroll.endBySize(this.search_result.length, res.total);
			});

			//设置列表数据
			// if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
			// this.dataList = this.dataList.concat(curPageData); //追加新数据
			// let totalSize = data.xxx;
			// let curPageLen =
		}
	},
	computed: {
		...mapState({
			vuex_address_search: state => state.vuex_address_search
		})
	},
	watch: {
		vuex_address_search: {
			handler(val) {
				this.downCallback();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.search-item {
	background-color: #ffffff;
	box-shadow: 0rpx 1rpx 13rpx 13rpx #ddd;
	border-radius: 10rpx;
	overflow: hidden;
}

.search-item-first {
	padding-top: 120rpx;
}

.searchBar-box {
	width: 750rpx;
	height: 100rpx;
	background-color: #ffffff;
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	z-index: 999;
}

.searchBar-input-placeholder {
	text-align: right;
}

.searchBar-input {
	height: 98rpx;
	text-align: right;
}

.searchBar {
	height: 100rpx;
	border: 1rpx solid $u-light-color;
	width: 690rpx;
}
</style>
